<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
      推荐两套后台管理系统的Vue现成代码
        1. vue-element-admin      Vue2
          https://panjiachen.github.io/vue-element-admin-site/zh/guide/
          https://juejin.cn/post/6844903476661583880

        2. naive-ui-admin         Vue3
          https://github.com/jekip/naive-ui-admin
          https://pro.naiveadmin.com/login?redirect=/dashboard/console

     -->

    <div id="app">
      <button @click="fn1">存储</button>
      <button @click="fn2">获取</button>
    </div>

    <script src="../lib/vue.js"></script>
    <script>
      const allRights = [
        {
          name: "sys",
          text: "系统管理",
          children: [
            { name: "sys.role", text: "角色管理" },
            { name: "sys.menu", text: "菜单管理" },
          ],
        },
        {
          name: "dashboard",
          text: "Dashboard",
          children: [
            { name: "dashboard.console", text: "主控台" },
            { name: "dashboard.workplace", text: "工作台" },
            { name: "dashboard.monitor", text: "监控页" },
          ],
        },
        {
          name: "setting",
          text: "设置页面",
          children: [
            { name: "setting.account", text: "个人设置" },
            { name: "setting.system", text: "系统设置" },
          ],
        },
      ];

      const curRights = ["sys", "sys.role", "setting", "setting.system"];

      function getRights(list, permissions) {
        return list
          .filter((item) => permissions.includes(item.name))
          .map((item) => {
            const curItem = { ...item };

            if (curItem.children && curItem.children.length) {
              curItem.children = getRights(curItem.children, permissions);
            }

            return curItem;
          });
      }

      const result = getRights(allRights, curRights);
      console.log(result);

      // 实现一系列函数来操作 localStorage
      const MyStorage = {
        // key - key
        // value - value
        // exp - 过期时间，是一个毫秒数
        set(key, value, exp) {
          const obj = {
            value: value,
            exp: new Date().getTime() + exp,
          };

          localStorage.setItem(key, JSON.stringify(obj));
        },

        get(key) {
          const value = localStorage.getItem(key);
          if (!value) return null;

          // 解析
          const obj = JSON.parse(value);
          // 判断是否过期
          if (obj.exp <= new Date().getTime()) {
            // 过期
            localStorage.removeItem(key);
            return null;
          } else {
            return obj.value;
          }
        },
      };

      const vm = new Vue({
        el: "#app",
        data: {
          count: 200,
        },
        methods: {
          fn1() {
            MyStorage.set("name", "张三", 10 * 1000);
          },
          fn2() {
            const result = MyStorage.get("name");
            console.log(result);
          },
        },
      });
    </script>
  </body>
</html>
